<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">
    <el-button @click="toAdd">添加分类</el-button>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名">
        </el-table-column>
    </el-table>
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addData">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData:[],
            dialogFormVisible: false,
            form: {
                name: '',
            },
            formLabelWidth: '120px'

        },
        watch:{
        },
        methods:{
            toAdd(){
                this.dialogFormVisible = true;
            },
            addData(){
                axios.post("/type/add",this.form).then(res=>{
                    this.$message.success("添加成功")
                    this.form = {
                        name:""
                    }
                    this.dialogFormVisible = false;
                    this.initData()
                })
            },
            initData(){
                axios.post("/type/findAll").then(res=>{
                    this.tableData = res.data;
                })

            }

        },
        created(){
            let user = localStorage.getItem("user_shenpi_07");//字符串

            //1、登录验证
            //2、权限验证
            if(user){//登录过了
                user = JSON.parse(user);
                if(user.role=="HR"){//有权操作当前页面
                    this.initData()
                }else{//无权操作当前页面，提示并跳转登录页面
                    this.$message.error("你不是HR，无权操作当前页面，请重新登录，即将跳转")
                    //延迟操作
                    setTimeout(()=>{
                        location.href = "/login.html"
                    },2000)
                }
            }else{//没有登录，提示并跳转登录页面
                this.$message.error("你还没有登录，请先登录，即将跳转")
                setTimeout(()=>{
                    location.href = "/login.html"
                },2000)
            }





        }
    })
</script>


</body>
</html>
